<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="../dist/photo-sphere-viewer.css">

  <style>
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    #photosphere {
      width: 100%;
      height: 100%;
    }

    .psv-button.custom-button {
      font-size: 22px;
      line-height: 20px;
    }

    .demo-label {
      color: white;
      font-size: 20px;
      font-family: Helvetica, sans-serif;
      text-align: center;
      padding: 5px;
      border: 1px solid white;
      background: rgba(0,0,0,0.4);
    }
  </style>
</head>
<body>

<div id="photosphere"></div>

<script src="../node_modules/three/build/three.js"></script>
<script src="../node_modules/d.js/lib/D.js"></script>
<script src="../node_modules/uevent/uevent.js"></script>
<script src="../node_modules/dot/doT.js"></script>
<script src="../node_modules/three/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../node_modules/three/examples/js/renderers/Projector.js"></script>
<script src="../node_modules/three/examples/js/controls/DeviceOrientationControls.js"></script>
<script src="../dist/photo-sphere-viewer.js"></script>

<!-- text used for the marker description -->
<script type="text/template" id="pin-content">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
    semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien
    ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi.
    Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a
      href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet
    congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus
    est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

  <img src="pin2.png" style="width:100%"/>

  <pre><code>
#header h1 a {
	display: block;
	width: 300px;
	height: 80px;
}
</code></pre>
</script>

<!-- pattern used for the polygon marker -->
<svg id="patterns">
  <defs>
    <pattern id="dots" x="10" y="10" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" style="stroke: none; fill: rgba(255,0,0,0.4)"/>
    </pattern>
    <pattern id="points" x="10" y="10" width="15" height="15" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.8" style="stroke: none; fill: red"/>
    </pattern>
  </defs>
</svg>

<script>
  var panos = [
    {
      url: 'Bryce-Canyon-National-Park-Mark-Doliner.jpg',
      desc: 'Bryce Canyon National Park <b>&copy; Mark Doliner</b>',
      target: {
        longitude: 3.848,
        latitude: -0.244
      }
    }, {
      url: 'Bryce-Canyon-By-Jess-Beauchemin.jpg',
      desc: 'Bryce Canyon National Park <b>&copy; Jess Beauchemin</b>',
      target: {
        longitude: 3.715,
        latitude: 0.574
      }
    }
  ];

  var PSV = new PhotoSphereViewer({
    container: 'photosphere',
    panorama: panos[0].url,
    caption: panos[0].desc,
    loading_img: 'photosphere-logo.gif',
    longitude_range: [-7 * Math.PI / 8, 7 * Math.PI / 8],
    latitude_range: [-3 * Math.PI / 4, 3 * Math.PI / 4],
    anim_speed: '-2rpm',
    default_fov: 50,
    fisheye: true,
    move_speed: 1.1,
    time_anim: false,
    gyroscope: true,
    //webgl: true,
    navbar: [
      'autorotate', 'zoom', 'download', 'markers',
      'spacer-1',
      {
        title: 'Change image',
        className: 'custom-button',
        content: '↻',
        onClick: (function() {
          var i = 0;
          var loading = false;

          return function() {
            if (loading) {
              return;
            }

            i = 1 - i;
            loading = true;
            PSV.clearMarkers();

            PSV.setPanorama(panos[i].url, panos[i].target, true)
              .then(function() {
                PSV.setCaption(panos[i].desc);
                loading = false;
              });
          }
        }())
      },
      {
        id: 'disabled',
        title: 'This button is disabled',
        content: '❌',
        enabled: false
      },
      'caption',
      'gyroscope',
      'fullscreen'
    ],
    markers: (function() {
      var a = [];
      for (var i = 0; i < Math.PI * 2; i += Math.PI / 4) {
        for (var j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
          a.push({
            id: '#' + a.length,
            tooltip: '#' + a.length,
            latitude: j,
            longitude: i,
            image: 'pin.png',
            width: 32,
            height: 32,
            anchor: 'bottom center',
            data: {
              deletable: true
            }
          });
        }
      }

      a.push({
        id: 'lorem',
        tooltip: {
          content: 'Lorem ipsum dolor ist amet et consecturo.',
          position: 'bottom right'
        },
        content: document.getElementById('pin-content').innerHTML,
        latitude: 0,
        longitude: 0.20,
        image: 'pin2.png',
        width: 32,
        height: 32,
        anchor: 'bottom center'
      });

      a.push({
        id: 'polygon-sky',
        svgStyle: {
          fill: 'rgba(0, 190, 255, 0.1)'
        },
        polygon_rad: (function() {
          var points = [];

          for (var i = 0; i < Math.PI * 2; i += Math.PI / 8) {
            points.push(i);
            points.push(Math.PI / 8);
          }

          return points;
        }())
      });

      a.push({
        id: 'polygon',
        content: 'This mountain is so great it has dots on it!',
        polygon_px: [3184, 794, 3268, 841, 3367, 1194, 3327, 1307, 3065, 1221, 3097, 847],
        svgStyle: {
          fill: 'url(#points)', //'rgba(255,0,0,0.3)',
          stroke: 'rgba(255, 0, 50, 0.8)',
          'stroke-width': '2px'
        },
        tooltip: {
          content: 'This is a mountain',
          position: 'right bottom'
        }
      });

      a.push({
        id: 'polyline',
        polyline_rad: [5.924, 0.064, 5.859, -0.061, 5.710, -0.132, 5.410, -0.287, 4.329, -0.490, 3.838, -0.370, 3.725, -0.241],
        svgStyle: {
          stroke: 'rgba(80, 100, 50, 0.8)',
          'stroke-linecap': 'round',
          'stroke-linejoin': 'round',
          'stroke-width': '10px'
        },
        tooltip: 'This is a track'
      });

      a.push({
        id: 'html-img-demo',
        html: 'HTML & Image',
        scale: [0.5, 1.5],
        className: 'demo-label',
        longitude: 0.5,
        latitude: -0.48
      });

      a.push({
        id: 'gif',
        image: 'http://strangeplanet.fr/files/avatars/sleep-round.gif',
        width: 100,
        height: 100,
        longitude: 0.60,
        latitude: -0.35
      });

      a.push({
        id: 'text',
        html: 'This <b>is</b> text <img src="pin3.png" style="height: 24px; vertical-align: top;"/>',
        anchor: 'bottom right',
        style: {
          color: 'white',
          fontSize: '20px',
          fontFamily: 'Helvetica, sans-serif',
          textAlign: 'center'
        },
        longitude: 0.45,
        latitude: -0.4
      });

      a.push({
        id: 'svg-demo',
        html: 'SVG marker demo',
        scale: [0.5, 1.5],
        className: 'demo-label',
        longitude: -0.5,
        latitude: -0.48
      });

      a.push({
        id: 'circle',
        tooltip: 'A circle of radius 30',
        circle: 30,
        svgStyle: {
          fill: 'rgba(255,255,0,0.3)',
          stroke: 'yellow',
          'stroke-width': '2px'
        },
        longitude: -0.5,
        latitude: -0.28,
        anchor: 'center right'
      });

      a.push({
        id: 'ellipse',
        tooltip: 'An ellipse of radius 60/30',
        ellipse: [60, 30],
        svgStyle: {
          fill: 'rgba(255,255,0,0.3)',
          stroke: 'yellow',
          'stroke-width': '2px'
        },
        longitude: -0.5,
        latitude: -0.28,
        anchor: 'center left'
      });

      a.push({
        id: 'rect',
        tooltip: 'A square a side 60',
        rect: [60, 60],
        svgStyle: {
          fill: 'rgba(255,255,0,0.3)',
          stroke: 'yellow',
          'stroke-width': '2px'
        },
        longitude: -0.5,
        latitude: -0.38,
        anchor: 'center right'
      });

      a.push({
        id: 'path',
        tooltip: 'A custom path',
        path: 'M 0 0 L 60 60 L 60 0 L 0 60 L 0 0',
        svgStyle: {
          fill: 'rgba(255,255,0,0.3)',
          stroke: 'yellow',
          'stroke-width': '2px'
        },
        longitude: -0.5,
        latitude: -0.38,
        anchor: 'center left'
      });

      a.push({
        id: 'scale-demo',
        html: 'Marker scale demo',
        scale: [0.5, 1.5],
        className: 'demo-label',
        longitude: 0,
        latitude: -0.48
      });

      a.push({
        id: 'scale-0',
        tooltip: 'No scale',
        scale: false,
        circle: 20,
        svgStyle: {
          fill: 'rgba(0, 0, 0, 0.5)'
        },
        longitude: -0.1,
        latitude: -0.4
      });

      a.push({
        id: 'scale-1',
        tooltip: '<code>zoom x2</code>',
        scale: 2,
        circle: 20,
        svgStyle: {
          fill: 'rgba(0, 0, 0, 0.5)'
        },
        longitude: 0,
        latitude: -0.4
      });

      a.push({
        id: 'scale-2',
        tooltip: '<code>zoom x0.5 ; zoom x1.5</code>',
        scale: [0.5, 1.5],
        circle: 20,
        svgStyle: {
          fill: 'rgba(0, 0, 0, 0.5)'
        },
        longitude: 0.1,
        latitude: -0.4
      });

      return a;
    }())
  });

  PSV.on('click', function(e) {
    PSV.addMarker({
      id: '#' + Math.random(),
      tooltip: 'Generated marker',
      longitude: e.longitude,
      latitude: e.latitude,
      image: 'pin.png',
      width: 32,
      height: 32,
      anchor: 'bottom center',
      data: {
        deletable: true
      }
    });
  });

  PSV.on('select-marker', function(marker, dblclick) {
    if (marker.data && marker.data.deletable) {
      if (dblclick) {
        PSV.removeMarker(marker);
      }
      else {
        PSV.updateMarker({
          id: marker.id,
          image: 'pin2.png'
        });
      }
    }
  });

  PSV.on('over-marker', function(marker) {
    console.log('over', marker.id);
  });

  PSV.on('leave-marker', function(marker) {
    console.log('leave', marker.id);
  });

  PSV.on('select-marker-list', function(marker) {
    console.log('select-list', marker.id);
  });

  PSV.on('goto-marker-done', function(marker) {
    console.log('goto-done', marker.id);
  });
</script>

<script>
  document.write('<script src="//' + location.host.split(':')[0] + ':35729/livereload.js" async defer><' + '/script>');
</script>
</body>
</html>
